<script setup lang="ts">
import { ref, computed } from 'vue'
import useTabs from '../../use-tabs'
import Tab from './tab.vue'

const DEFAULT_TAB = {
  webContentsId: 0,
  favicon: '',
  title: '新标签页',
  loading: false,
  url: '',
  canGoBack: false,
  canGoForward: false
}
const { tabs, activeTabIndex, activeTab, removeTab  } = useTabs()
const hoverTabIndex = ref(-1)
const tabIdx = computed(() => [
  hoverTabIndex.value,
  hoverTabIndex.value - 1,
  activeTabIndex.value,
  activeTabIndex.value - 1,
  tabs.value.length - 1
])
</script>

<template>
  <div class="tab-bar">
    <Tab class="active" v-if="tabs.length === 0" :data="DEFAULT_TAB" :closeable="false"></Tab>
    <template v-else>
      <template v-for="(t, tIdx) in tabs" :key="t.name">
        <Tab
          :class="{ active: activeTabIndex === tIdx }"
          :data="t"
          @mouseenter="hoverTabIndex = tIdx"
          @mouseleave="hoverTabIndex = -1"
          @click="activeTab(tIdx)"
          @close="removeTab(tIdx)"
        ></Tab>
        <span
          class="tab-bar__line"
          :class="{ hidden: tabIdx.includes(tIdx) }"
        ></span>
      </template>
    </template>
  </div>
</template>

<style scoped>
.tab-bar {
  box-sizing: border-box;
  height: var(--bar-height);
  background: var(--color-gray-4);
  padding: var(--spacing-sm);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tab-bar__line {
  display: inline-block;
  width: 8px;
  height: 20px;
  text-align: center;
  transition: opacity 150ms;
}
.tab-bar__line.hidden {
  opacity: 0;
}
.tab-bar__line:before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 20px;
  background: var(--color-gray-5);
  line-height: 1;
}
</style>
